<template>
  <div id="app-container">

    <div class="el-card__body">
      <div data-v-ebcc336a=""><i data-v-ebcc336a="" class="el-icon-search"></i> <span data-v-ebcc336a="">筛选搜索</span>
        <button data-v-ebcc336a="" type="button" class="el-button el-button--primary el-button--small"
          style="float: right;">
          <!---->
          <!----><span>
            查询搜索
          </span>
        </button> <button data-v-ebcc336a="" type="button" class="el-button el-button--default el-button--small"
          style="float: right; margin-right: 15px;">
          <!---->
          <!----><span>
            重置
          </span>
        </button>
      </div>

      <el-form :inline="true" :model="listQuey" size="small" label-width="140px">
        <el-form-item label="输入搜索：">
          <el-input v-model="listQuey.orderSn" class="input-width" placeholder="商品名称" />
        </el-form-item>
        <el-form-item label="商品货号：">
          <el-input v-model="listQuey.receiverKeyword" class="input-width" placeholder="商品货号" />
        </el-form-item>
        <el-form-item label="商品分类：">
          <el-date-picker v-model="listQuey.orderType" class="input-width" placeholder="请选择" />
        </el-form-item>
        <el-form-item label="商品品牌：">
          <el-select v-model="listQuey.status" class="input-width" placeholder="请选择品牌" clearable>
            <!-- 下拉可选 -->
            <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="上架状态：">
          <el-select v-model="listQuey.orderType" class="input-width" placeholder="全部" clearable>
            <el-option v-for="item in orderTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="审核状态：">
          <el-select v-model="listQuey.sourceType" class="input-width" placeholder="全部" clearable>
            <el-option v-for="item in sourceTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      </el-form>
    </div>

    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets" />
      <span>数据列表</span>
    </el-card>

    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column align="center" label="编号" width="95">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="商品图片">
        <template slot-scope="scope"><!--
          {{ scope.row.image }} -->
          <img :src="img_xiaomi" class="size">
        </template>
      </el-table-column>
      <el-table-column align="center" label="商品名称">
        <template slot-scope="scope">
          {{ scope.row.name_1 }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="价格/货号">
        <template slot-scope="scope">
          {{ scope.row.price_1 }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="标签">
        <template slot-scope="scope">
          <el-switch v-model="value1" inactive-text="上架:" active-color="#13ce66" inactive-color="#ff4949">
          </el-switch>
          <el-switch style="display: block;margin-top: 10px;" v-model="value2" active-color="#13ce66"
            inactive-color="#ff4949" inactive-text="新品:">
          </el-switch>
          <el-switch style="display: block;margin-top: 10px;" v-model="value3" active-color="#13ce66"
            inactive-color="#ff4949" inactive-text="推荐:">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column align="center" label="排序">
        <template slot-scope="scope">
          {{ scope.row.paixu }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="SKU库存">
        <template slot-scope="scope">
          {{ scope.row.source }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="销量">
        <template slot-scope="scope">
          {{ scope.row.xiaoliang }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="审核状态">
        <template slot-scope="scope">
          {{ scope.row.state_1 }}
          <br>
          <a href="#" style="color: #409EFF;">审核详情</a>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{ row }">
          <el-button type="primary" size="mini" :inline="true" @click="handleUpate(row)">查看</el-button>
          <el-button type="primary" size="mini" :inline="true" @click="handleUpate(row)">编辑</el-button>
          <el-button type="primary" size="mini" :inline="true" @click="handleUpate(row)">日志</el-button>
          <el-button type="danger" size="mini" :inline="true" @click="handleDelete(row, $index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
      @pagination="fetchData" />
    <!-- Edit dialog -->
    <el-dialog :visible.sync="dialogVisible">
      <el-form ref="dataForm" :model="temp" :rules="rules">
        <el-form-item label="订单编号" prop="oid">
          <el-input v-model="temp.oid" />
        </el-form-item>
        <el-form-item label="提交时间" prop="datetime">
          <el-input v-model="temp.datetime" />
        </el-form-item>
        <el-form-item label="用户账号" prop="name">
          <el-input v-model="temp.name" />
        </el-form-item>
        <el-form-item label="订单金额" prop="price">
          <el-input v-model="temp.price" />
        </el-form-item>
        <el-form-item label="支付方式" prop="payment">
          <el-input v-model="temp.payment" />
        </el-form-item>
        <el-form-item label="订单来源" prop="source">
          <el-input v-model="temp.source" />
        </el-form-item>
        <el-form-item label="订单状态" prop="state">
          <el-input v-model="temp.state" />
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
  import {
    getList,
    updateFormData,
    createStudent
  } from '@/api/student'
  import pagination from '@/components/Pagination'
  import img_xiaomi from '@/assets/images/xiaomi.png';

  const defaultListQuery = {
    pageNum: 1,
    pageSize: 10,
    orderSn: null,
    receiverKeyword: null,
    status: null,
    orderType: null,
    sourceType: null,
    createTime: null
  }

  export default {
    components: {
      pagination
    },
    data() {
      const IDRule = (rule, value, callback) => {
        const reg = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
        if (this.temp.old === '' || this.temp.old === 'undefine') {
          callback(new Error('resident ID is required'))
        } else if (!reg.test(this.temp.old)) {
          callback(new Error('wrong format'))
        } else {
          callback()
        }
      }
      return {
        listQuey: Object.assign({}, defaultListQuery),
        operateType: null,
        multipleSelection: [],
        total: 0,
        list: null,
        listLoading: false,
        exportLoading: false,
        // show eidt dialog ?
        dialogVisible: false,
        temp: {
          id: null,
          oid: '',
          time: '',
          name: '',
          money: '',
          pay: '',
          source: '',
          status: ''
        },
        statusOptions: [{
            label: '小米',
            value: 0
          },
          {
            label: '苹果',
            value: 1
          },
          {
            label: '三星',
            value: 2
          },
          {
            label: '七匹狼',
            value: 3
          },
          {
            label: '华为',
            value: 4
          },
          {
            label: '格力',
            value: 5
          }, {
            label: '万太',
            value: 6
          }
        ],
        orderTypeOptions: [{
            label: '上架',
            value: 0
          },
          {
            label: '下架',
            value: 1
          }
        ],
        sourceTypeOptions: [{
            label: '审核通过',
            value: 0
          },
          {
            label: '未审核',
            value: 1
          }
        ],
        operateOptions: [{
            label: '批量发货',
            value: 1
          },
          {
            label: '关闭订单',
            value: 2
          },
          {
            label: '删除订单',
            value: 3
          }
        ],
        // search condition
        listQuery: {
          page: 1,
          limit: 20,
          name: undefined
        },
        // create or edit
        dialogStatus: '',
        rules: {

        },
        img_xiaomi,
        value1: true,
        value2: true,
        value3: true
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      fetchData() {
        this.listLoading = true
        // send request and recieve data from backend
        getList(this.listQuery).then((response) => {
          this.list = response.data.items
          this.total = response.data.total
          setTimeout(() => {
            this.listLoading = false
          }, 1.5 * 1000)
        })
      },
      // when user click on edit butoon, show edit dialog
      handleUpate(row) {
        this.temp = Object.assign({}, row)
        this.dialogVisible = true
        this.dialogStatus = 'update'
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      },
      handleDelete(row, index) {
        this.list.splice(index, 1)
        this.$notify({
          title: 'Success',
          message: 'Delete success',
          type: 'success',
          duration: 2000
        })
      },
      // Handle create record method
      handleCreate() {
        this.restTemp()
        this.dialogStatus = 'create'
        this.dialogVisible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      },
      createData() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.temp.id = parseInt(Math.random * 100) + 1024
            createStudent(this.temp).then(res => {
              this.list.unshift(this.temp)
              this.dialogVisible = false
              this.$notify({
                title: 'Success',
                message: 'Create success',
                type: 'success',
                duration: 2000
              })
            })
          }
        })
      },
      restTemp() {
        this.temp = {
          id: null,
          oid: '',
          datetime: '',
          name: '',
          price: '',
          payment: '',
          source: '',
          state: '',
          // create or edit
          dialogStatus: ''
        }
      },
      // confirm update data
      updateData() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            const tempData = Object.assign({}, this.temp)
            // send upate request
            updateFormData(tempData).then(res => {
              // finde index of data
              const index = this.list.findIndex(v => v.id === this.temp.id)
              this.list.splice(index, 1, this.temp)
              this.dialogVisible = false
              this.$notify({
                title: 'Success',
                message: 'Upate success',
                type: 'success',
                duration: 2000
              })
            })
          }
        })
      }
    }
  }
</script>
<style scoped>
.size{
  width: 60px;
  height: 80px;
}
</style>
